<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>列表过滤</title>

  <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
  <input type="text" placeholder="请输入名字" v-model="keyword">
  <ul>
    <li v-for="(p,index) in filePersons" :key="p.id">
      {{p.name}}-{{p.age}}-{{p.sex}}
    </li>
  </ul>
</div>
</body>
<script>
  //用watch实现
  // new Vue({
  //   el: "#root",
  //   data() {
  //     return {
  //       keyword: '',
  //       persons: [
  //         {id: '001', name: '马冬梅', age: '18', sex: '女'},
  //         {id: '002', name: '周冬雨', age: '19', sex: '女'},
  //         {id: '003', name: '周杰伦', age: '21', sex: '男'},
  //         {id: '004', name: '温兆伦', age: '20', sex: '男'},
  //       ],
  //       filePersons: [],
  //     }
  //   },
  //   watch: {
  //     keyword: {
  //      immediate:true,
  //       handler(newValue) {
  //         this.filePersons = this.persons.filter((f) => {
  //           return f.name.indexOf(newValue) != -1
  //         })
  //       }
  //     }
  //   }
  // });

  //用computed实现
  new Vue({
    el: "#root",
    data() {
      return {
        keyword: '',
        persons: [
          {id: '001', name: '马冬梅', age: '18', sex: '女'},
          {id: '002', name: '周冬雨', age: '19', sex: '女'},
          {id: '003', name: '周杰伦', age: '21', sex: '男'},
          {id: '004', name: '温兆伦', age: '20', sex: '男'},
        ],
      }
    },
    computed: {
      filePersons() {
        return this.persons.filter((f) => {
          return f.name.indexOf(this.keyword) != -1
        })
      }
    }
  });
</script>
</html>
